import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const NgPatternView = defineView({
  controller: class NgPatternController {
    static $inject = ["$scope"];

    /**
     * @param {ng.WIScope} $scope
     */
    constructor($scope) {
      $scope.regex = "\\d+";
    }
  },
  template: /* HTML */ html`
    <div>
      <form name="form">
        <label for="regex">Set a pattern (regex string): </label>
        <input class="form-control" type="text" ng-model="regex" id="regex" />
        <br />
        <label for="input"
          >This input is restricted by the current pattern:
        </label>
        <input
          class="form-control"
          type="text"
          ng-model="model"
          id="input"
          name="input"
          ng-pattern="regex"
        /><br />
        <hr />
        input valid? = <code>{{form.input.$valid}}</code><br />
        model = <code>{{model}}</code>
      </form>
    </div>
  `,
});

export default NgPatternView;
